<template>

    <div>
        <div class="card" style="margin-bottom: 10px;">
            <el-input v-model="data.title" :prefix-icon="Search" style="width: 300px; margin-right: 10px"
                      placeholder="请输入房源名称"></el-input>
            <el-button type="primary" style="margin-left: 10px;" @click="load">查询</el-button>
            <el-button type="info" @click="reset">重置</el-button>
        </div>
        <div class="card">
            <div style="margin-bottom: 10px;">
                <el-table :data="data.tableData">
                    <el-table-column label="序号" prop="id" width="70"></el-table-column>
                    <el-table-column label="图片">
                        <template #default="scope">
                            <el-image v-if="scope.row.photos" :src="scope.row.photos"
                                      :preview-src-list="[scope.row.photos]"
                                      style="width: 40px;height: 40px;border-radius: 4px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="标题" prop="title"></el-table-column>
                    <el-table-column label="面积" prop="area"></el-table-column>
                    <el-table-column label="租金" prop="rent"></el-table-column>
                    <el-table-column label="地址" prop="address"></el-table-column>
                    <el-table-column label="状态">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == 0" type="warning" effect="dark">空闲</el-tag>
                            <el-tag v-if="scope.row.status == 1" type="success" effect="dark">已租</el-tag>
                            <el-tag v-if="scope.row.status == 2" type="danger" effect="dark">租赁中</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="160">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="handleTuiRent(scope.row.id)">退租</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="card">
                <el-pagination background layout="prev, pager,next" @current-change="handelCurrentChange"
                               v-model:current-page="data.pageNum" v-model:page-size="data.pageSize"
                               :total="data.total"/>
            </div>
        </div>
    </div>


</template>


<script setup>
    import {reactive, ref} from "vue";
    import {Search} from "@element-plus/icons-vue";
    import request from "@/utils/request.js";
    import {ElMessage} from "element-plus";

    //初始值
    const data = reactive({
        title: '',  //初始搜索条件是''
        tableData: [],
        pageNum: 1, //当前页码
        pageSize: 8, //每页个数
        total: 0,
        formVisible: false //新增框不显示
    })

    const user = JSON.parse(localStorage.getItem('login-user') || '{}')

    const formRef = ref()

    const rules = reactive({
        title: [
            {required: true, message: '请输入房源标题', trigger: 'blur'}
        ],
        area: [
            {required: true, message: '请输入房源面积', trigger: 'blur'}
        ]
    })


    //请求数据
    const load = () => {
        //发送了一个Get请求，查询房源信息
        request.get("/house/selectPageMyHouse", {
            params: {
                pageNum: data.pageNum, //当前页码
                pageSize: data.pageSize, //每页大小
                title: data.title, //查询条件
                member_id:user.id
            }
        }).then(res => {
            console.log("分页数据:" + JSON.stringify(res.data));
            data.tableData = res.data?.list || [];
            data.total = res.data?.total || 0;
        })
    };

    //翻页
    const handelCurrentChange = (pageNum) => {
        // 当翻页的时候重新加载数据即可
        load()
    };

    //重置
    const reset = () => {
        data.title = '';
        load()
    };

    /**
     * 01-调用方法获取后台数据,视图打开自动调用该方法，加载房源信息
     */
    load();

    //点击新增
    const handlerAdd = () => {
        data.form = {};
        data.formVisible = true; //打开对话框
    };


    //删除
    const handleTuiRent = (id) => {
        ElMessageBox.confirm('您确认退租该房子吗？', '删除确认', {type: 'warning'}).then(res => {
            request.request({
                url: '/house/updateStatus',
                method: 'PUT',
                data: {"id": id, "member_id": "", "status": "0"}
            }).then(res => {
                if (res.code === '200') {
                    load()    // 重新获取数据
                    ElMessage.success("操作成功");
                } else {
                    ElMessage.error(res.msg)
                }
            })
        }).catch(res => {
        })
    }


</script>